<template>
	<view class="container">
		<view class="headerInfo">
			<view class="doctorOnlineList">
				<view class="onlineTitle">在线值班医生</view>
				<view class="onlineListItem" v-for="(item, index) in onlineDoctorList" :key="index">
					<image :src="'http://47.115.220.91:8787/commons/image?picName='+ item.picture" 
					mode="widthFix" @click="toChatPage(item.name)"></image>
					<text class="doctorInfo">{{ item.name }}--{{ item.contactWay }}</text>
				</view>
			</view>
			<view class="headerRight">
				<view class="currentUser">
					登录用户:{{ loginUserName }}
				</view>
				<button @click="toAppointmentPage">预约</button>
			</view>
			
		</view>
		<rich-text :nodes="'<br>'"></rich-text>
		
		<!-- 我的预约信息 -->
		<view class="myAppointment">
			<view class="myAppointmentTitle">我的预约信息</view>
			<rich-text :nodes="'<hr>'"></rich-text>
			<uni-table border stripe emptyText="暂无预约信息" align="center">
				<uni-tr>
					<uni-th align="center">姓名</uni-th>
					<uni-th align="center">性别</uni-th>
					<uni-th align="center">预约时间</uni-th>
					<uni-th align="center">预约类型</uni-th>
					<uni-th align="center">状态</uni-th>
				</uni-tr>
				
				<uni-tr v-if="currentObj.length > 0" v-for="(item, index) in currentObj" :key="index">
					<uni-td align="center">{{ currentObj[index].studentName }}</uni-td>
					<uni-td align="center">{{ currentObj[index].gender }}</uni-td>
					<uni-td align="center">{{ currentObj[index].appointmentTime }}</uni-td>
					<uni-td align="center">{{ currentObj[index].appointmentType }}</uni-td>
					<uni-td align="center">{{ currentObj[index].status | appointmentInfoHandle }}</uni-td>
					
				</uni-tr>
			</uni-table>
		</view>
		<!-- <rich-text :nodes="'<br>'"></rich-text> -->
		
		<!-- 所有预约信息展示板 -->
		<view class="allAppointmentInfo">
			<view class="allAppointmentInfoTitle">所有预约信息</view>
			<rich-text :nodes="'<hr>'"></rich-text>
			<uni-table border stripe emptyText="暂无更多数据" id="listBox">
				<uni-tr>
					<uni-th align="center">姓名</uni-th>
					<uni-th align="center">预约时间</uni-th>
					<uni-th align="center">状态</uni-th>
				</uni-tr>
				<uni-tr v-for="(item, index) in allAppointmentInfo" :key="index">
					<uni-td align="center">{{ item.studentName }}</uni-td>
					<uni-td align="center">{{ item.appointmentTime }}</uni-td>
					<uni-td align="center">{{ item.status | appointmentInfoHandle}}</uni-td>
				</uni-tr>
			</uni-table>
			
		</view>
		 
	</view>
</template>

<script>
	import {mapState, mapMutations} from "vuex";
	export default {
		data() {
			return {
				// 在线医生列表
				onlineDoctorList:[],
				// 当前用户的预约信息
				currentObj:[],
				// 所有用户的预约信息
				allAppointmentInfo:[]
			};
		},
		computed:{
			...mapState("my_user",["loginUserName"])
		},
		onShow() {
			this.allAppointmentInfo = [];
			this.currentObj = [];
			this.initData();
		},
		mounted() {
			uni.showMsg("欢迎使用！！！")
			this.initData();
		},
		filters:{
			// 预约处理状态过滤器
			appointmentInfoHandle(value){
				switch (value) {
				    case "0":
				      return '待处理';
				    case "1":
				      return '正在处理';
				    case "2":
				      return '已处理';
				    case "3":
				      return '已错过';
				    default:
				      return '';
				  }
			}
		},
		methods:{
			// 页面跳转，聊天页面
			toChatPage(doctorName){
				uni.navigateTo({
					url:"/pages/Chat/Chat?targetName="+ doctorName + "&isStudent=ok" 
				})
			},
			// 获取初始化数据
			initData(){
				// 获取在线医生列表
				this.getDoctorOnlineList();
				// 获取当前用户的预约信息
				this.getCurrentUserAppointmentInfo();
				// 获取所有预约信息
				this.getAllAppointmentInfo();
				// // 创建WebSocket连接，用于触发数据重载
				// this.getWebSocketLink();
			},
			
			// 获取WebSocket连接并且接收数据
			getWebSocketLink(){
				let that = this;
				// 连接
				uni.connectSocket({
				  url: 'ws://localhost:8787/myWebSocket',
				  success(res) {
					console.log("WebSocket连接成功！！");
				  }
				});
				// 开启连接，发送绑定连接
				uni.onSocketOpen(function (res) {
					let randomValue = new Date().getTime();
					uni.sendSocketMessage({
						// 连接，用于接收重载信息
						data: "$$" + randomValue
					});
				});
				// 监听消息的发送
				uni.onSocketMessage(function (res) {
					console.log('收到服务器内容：' + res.data);
					if("reload" === res.data){
						that.initData();
					}
				});
			},
			
			// 页面跳转-预约页面
			toAppointmentPage(){
				uni.navigateTo({
					url:"/pages/appointment/appointment"
				})
			},
			// 获取所有预约信息
			getAllAppointmentInfo(){
				let that = this;
				uni.request({
					url:"http://47.115.220.91:8787/studentPages",
					method:"GET",
					success(res) {
						that.allAppointmentInfo = res.data.data;
					}
				})
			},
			// 获取在线医生列表
			getDoctorOnlineList(){
				let that = this;
				uni.request({
					url:"http://47.115.220.91:8787/studentPages/getOnlineDoctor",
					method:"GET",
					success(res) {
						// 将在线医生列表赋值
						that.onlineDoctorList = res.data.data;
					}
				})
			},
			// 获取当前用户的预约信息
			getCurrentUserAppointmentInfo(){
				let that = this;
				uni.request({
					url:"http://47.115.220.91:8787/studentPages/getOnes?studentName=" + this.loginUserName,
					method:"GET",
					success(res) {
						that.currentObj = res.data.data;
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.headerRight{
		display: flex;
		flex-direction: column;
		
		button{
			width: 160%;
			margin-top: 10px;
			/* margin-right: 66px; */
			position: relative;
			right: 60px;
			background-color: #4177a9;
			color: white;
		}
	}
	
	#listBox{
		position: relative;
		top: 25px;
	}
	
	.allAppointmentInfo{
		.allAppointmentInfoTitle{
			border-top: solid 2px #ccd1e1;
			margin-top: 32px;
			text-align: center;
			font-size: 18px;
		}
	}
	
	.notInfoProperties{
		font-size: 12px;
	}
	
	.myAppointment{
		// height: 50px;
		// border: saddlebrown solid 2px;
		
		.myAppointmentTitle{
			text-align: center;
			border-top: solid 2px #ccd1e1;
			font-size: 18px;
		}
	}
	
	.doctorOnlineList{
		padding: 2px;
		.onlineTitle{
			text-align: center;
		}
		
		border: solid #6798c5 2px; 
		border-radius: 5px;
	}
	
	.doctorInfo{
		position: relative;
		left: 2px;
		top:-10px
	}
	
	.onlineListItem image{
		width: 25px;
	}
	
	.doctorOnlineList{
		display: flex;
		flex-direction: column;
	}
	
	.headerInfo{
		padding: 2px;
		display: flex;
		justify-content: space-between;
	}
</style>
